<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Redux</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

    const { createStore, combineReducers } = Redux
    const initialState = {
      colors: [
          {
              id: 0,
              title: "Rad Red",
              color: "#FF0000",
              rating: 3,
              timestamp: "Sat Mar 12 2016 16:12:09 GMT-0800 (PST)"
          },
          {
              id: 1,
              title: "Crazy Green",
              color: "#00FF00",
              rating: 0,
              timestamp: "Fri Mar 11 2016 12:00:00 GMT-0800 (PST)"
          },
          {
              id: 2,
              title: "Big Blue",
              color: "#0000FF",
              rating: 5,
              timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
          }
      ],
      sort: "SORTED_BY_TITLE"
    }

    const color = (state = {}, action) => {
      switch (action.type) {
          case "ADD_COLOR":
              return {
                  id: action.id,
                  title: action.title,
                  color: action.color,
                  timestamp: action.timestamp,
                  rating: 0
              }
          case "RATE_COLOR":
              return (state.id !== action.id) ?
                  state :
                  {
                      ...state,
                      rating: action.rating
                  }
          default :
              return state
      }
    }

    const colors = (state = [], action) => {
      switch (action.type) {
          case "ADD_COLOR" :
              return [
                  ...state,
                  color({}, action)
              ]
          case "RATE_COLOR" :
              return state.map(
                  c => color(c, action)
              )
          case "REMOVE_COLOR" :
              return state.filter(
                  c => c.id !== action.id
              )
          default:
              return state
      }
    }

    const sort = (state="SORTED_BY_DATE", action) => {
      switch (action.type) {
          case "SORT_COLORS":
              return action.sortBy
          default :
              return state
      }
    }

    const store = createStore(
      combineReducers({ colors, sort }),
      initialState
    )



    console.log(
      "Length of color array before ADD_COLOR",
      store.getState().colors.length
    )
    store.dispatch({
      type: "ADD_COLOR",
      id: 1,
      title: "Party Pink",
      color: "#F142FF",
      timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
    })
    console.log(
      "Length of color array after ADD_COLOR",
      store.getState().colors.length
    )



    console.log(
      "Color rating before RATE_COLOR",
      store.getState().colors[0].rating
    )
    store.dispatch({
      type: "RATE_COLOR",
      id: 0,
      rating: 5
    })
    console.log(
      "Color rating after RATE_COLOR",
      store.getState().colors[0].rating
    )



    console.log(
      "Application state after both actions",
      store.getState()
    )


  </script>
</body>
</html>
